import React, { Component } from "react";
import { Image, ScrollView, Text } from "react-native";

/**
 * ScrollView 是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要同类型的，ScrollView 不仅可以垂直滚动，还能水平滚动（通过 horizontal 属性来设置）
 * */

/*
* ScrollView 适合用来显示数量不多的滚动元素。放置在 ScrollView 中的所有组件都会被渲染，哪怕这些组件因为内容太长被挤出了屏幕外，
* 如果你需要显示较长的滚动列表，那么应该使用功能差不多但性能更好的 ListView 组件。
* */

export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  render() {
    return (
      <ScrollView>
        <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
        <Image source={require("./avatar.jpg")} />
        <Image source={require("./avatar.jpg")} />
        <Image source={require("./avatar.jpg")} />
        <Image source={require("./avatar.jpg")} />
        <Image source={require("./avatar.jpg")} />
        <Text style={{ fontSize: 96 }}>if you like</Text>
        <Image source={require("./avatar.jpg")} />
        <Image source={require("./avatar.jpg")} />
        <Image source={require("./avatar.jpg")} />
        <Image source={require("./avatar.jpg")} />
        <Image source={require("./avatar.jpg")} />
      </ScrollView>
    );
  }
}
